<template>
  <div class="app-container monthlyBudget">
    <el-form :model="selectForm" ref="queryForm" :inline="true" label-width="120px">
      <el-form-item label="预算月份：">
        <el-date-picker
          v-model="selectForm.mouTh"
          type="month"
          size="small"
          format="yyyy-MM"
          @change="getList"
          value-format="yyyy-MM"
          placeholder="选择月">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="战线分类：">
        <el-select v-model="selectForm.depId" placeholder="请选择" size="small"  @change="getList">
          <el-option
            v-for="item in classify"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
<!--        <el-button size="mini" type="warning" icon="el-icon-refresh" @click="allocation">自动分配</el-button>-->
        <el-button size="mini" type="success" icon="el-icon-document-add" @click="saveBtn">保存</el-button>
        <el-button size="mini" type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="listData" border   >
      <el-table-column  align="center" label="部门名称" prop="deptName"/>
      <el-table-column  align="center" label="月初始" prop="mouthStart">
        <template slot-scope="scope">
          <el-input v-model="scope.row.mouthStart" size="mini" ></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center"  label="月调整" prop="mouthChange">
        <template slot-scope="scope">
          <el-input v-model="scope.row.mouthChange" size="mini" ></el-input>
        </template>
      </el-table-column>
      <el-table-column  align="center" label="月预算" prop="yueys">
        <template slot-scope="scope">
         <span>{{scope.row.mouthChange/1+scope.row.mouthStart/1}}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :page.sync="selectForm.pageNum"
      :limit.sync="selectForm.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
    import request from '@/utils/request'
    export default {
      name: "districtMonthlyBudget.vue",
      data(){
        return{
          classify:[],
          listData:[],
          total:0,
          selectForm:{
            mouTh:'',
            depId:'',
            pageNum: 1,
            pageSize: 10,
          },
          department:[
            {
              id:'0',
              title:'全部',
            },{
              id:'1',
              title:'正常生产',
            },{
              id:'2',
              title:'安装搬家',
            },{
              id:'3',
              title:'巷道维修',
            }
          ],
          loading:false,
          list:{
            rows:[{
              one:'1',
              two:'2',
            },{
                one:'1',
                two:'2',
              }
            ],
            total:'',
          }
        }
      },
      created() {
        var myDate = new Date();
        var yue = myDate.getMonth()+1
        if(yue<9){
          yue = '0'+yue
        }

        this.selectForm.mouTh =  myDate.getFullYear()+'-'+ yue+'';


        this.getZhanxian();

      },
      methods:{
        //保存
        saveBtn:function(){
          if(this.listData){
            for (var i=0;i<this.listData.length;i++){
              this.listData[i].mouthChange =this.listData[i].mouthChange/1
              this.listData[i].mouthStart =this.listData[i].mouthStart/1
            }
          }

          request({
            url: '/method/WzTeamBudget',
            method: 'put',
            data: this.listData
          }).then(response => {
            if(response.code=='200'){
              this.$message({
                type: 'success',
                message: '保存成功!'
              });
            }

          });
        },
        //获取战线
        getZhanxian:function(){
          request({
            url: '/system/dept/listFront',
            method: 'get',
          }).then(response => {
            this.classify = response.data
            this.selectForm.depId = this.classify[0].deptId
            this.getList();
          });
        },
        getList(){
          this.loading = true;
          request({
            url: '/method/WzTeamBudget/list',
            method: 'get',
            params:this.selectForm
          }).then(response => {
            this.loading = false;
            this.listData = response.rows
            this.total = response.total
          });

        },
        //自动分配
        allocation(row){
          this.$confirm('确认要自动分配项目的月预算吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '分配成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        },
      }
    }
</script>

<style scoped>

</style>
